<!-- 交易佣金 生成报表 -->
<template>
    <div class="marketCommissionReport">
        <el-breadcrumb separator="/" class="bread-title">
            <el-breadcrumb-item :to="{ path: '/marketCommissionTable' }">市场佣金</el-breadcrumb-item>
            <el-breadcrumb-item>生成报表</el-breadcrumb-item>
        </el-breadcrumb>

        <div>
            <p>选择报表月份</p>
            <el-date-picker
                    v-model="cmonth"
                    type="month"
                    :picker-options="pickerOptions"
                    placeholder="选择月">
            </el-date-picker>
        </div>

        <table border="1">
            <tr>
                <th>报表类型</th>
                <th>操作</th>
            </tr>
            <tr>
                <td>市场佣金</td>
                <td><a style="text-decoration: none" href="javascript:void(0);" title="" @click="openbindstrandard()">{{bindtips}}</a>
                </td>
            </tr>
        </table>

        <div style="margin: 40px 0 0 180px">
            <el-button type="primary" @click="generateReport()">生成报表</el-button>
            <el-button type="primary" @click="cancel()">取消</el-button>
        </div>

        <el-dialog
                title="选择标准"
                :visible.sync="selectDialogVisible"
                width="40%"
                class="dialog"
                center>
            <div>
                <el-row :span="24" :gutter="20">
                    <el-col :span="18">
                        <el-input
                                placeholder="请输入内容"
                                prefix-icon="el-icon-search"
                                size="normal"
                                v-model="version">
                        </el-input>
                    </el-col>
                    <el-col :span="6">
                        <el-button size="normal" type="primary" @click="searchlist">查询</el-button>
                    </el-col>
                </el-row>

                <div class="mt20" style="margin-left: 60px;height: 400px;overflow-y: auto;">
                    <div class="selectedInterval-item" v-for="item in standardlist" :key="item.id" @click="selectradio(item.id)">
                        <div>
                            <el-radio @change="selectradio(item.id)" :label="item.id" v-model="selectedInterval" key="item.id" :value="item.id">
                                &nbsp;
                            </el-radio>
                        </div>
                        <div>
                            <div>提取标准：市场佣金</div>
                            <div>佣金来源：{{item.commissionSoureName}}</div>
                            <div>提取规则：{{item.extractCategoryName}}</div>
                            <div>计提节点：{{item.calNodeName}}</div>
                            <div>版本：{{item.version}}</div>
                        </div>
                        <div>
                            <el-button style="float:right;margin-right:20px;" type="text" @click="standardDetail(item.id)">查看详情</el-button>
                        </div>
                    </div>
                </div>
            </div>
            <span slot="footer" class="dialog-footer" style="text-align: center !important;">
                <el-button @click="ensure">绑定</el-button>
                <el-button type="primary" @click="selectDialogVisible = false">取 消</el-button>
            </span>
        </el-dialog>
        <!-- 标准详情 -->
        <el-dialog title="标准详情" append-to-body :visible.sync="dialogDetail">
        <market-commission-standard-handle :viewDetailReceiveId="standardId"/>
        <span slot="footer" class="dialog-footer" style="text-align: center !important;">
            <el-button type="primary" @click="dialogDetail = false">取消</el-button>
        </span>
        </el-dialog>
    </div>
</template>

<script>
    import api from '@/api/apiPath';
    import marketCommissionStandardHandle from '../standardManage/marketCommissionStandardHandle';
    export default {
        name: "marketCommissionReport",
        components: {
            marketCommissionStandardHandle
        },
        data() {
            return {
                bindtips: '绑定标准',
                cmonth: undefined,
                selectDialogVisible: false,
                dialogDetail: false,
                selectDialogInputValue: "",
                selectedInterval: "",
                standardlist: undefined,
                version: undefined,
                pickerOptions: {
                    disabledDate: (time) => {
                        return time.getTime() > Date.now();
                    }
                },
                standardId: ''
            }
        },
        created() {
            this.getstandard()
        },
        mounted() {

        },
        methods: {
            standardDetail(id) {
                this.standardId = id;
                console.log(this.standardId)
                this.dialogDetail = true;
            },
            searchlist() {
                this.getstandard()
            },
            selectradio(val) {
                this.selectedInterval = +val
            },
            getTimeString(timestamp) {
                if (!timestamp) {
                    return ''
                }
                const time = new Date(timestamp)
                let dateStr = ''
                const year = time.getFullYear() //当前完整年数 （4位 1970-？？？）
                const month = String(time.getMonth() + 1).length === 1 ? '0' + (time.getMonth() + 1) : (time.getMonth() + 1)
                dateStr = year + '-' + month
                return dateStr
            },
            generateReport() {
                let month = this.getTimeString(this.cmonth)
                if (month == '') {
                    this.$message({
                        message: '请选择日期',
                        type: 'warning'
                    });
                    return
                }
                if(this.bindtips === '绑定标准'){
                    this.$message({
                        message: '请先绑定标准',
                        type: 'warning'
                    });
                    return
                }

                console.log(this.bindtips);

                this.$confirm('是否确认生成报表?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.axios.post(api.marketCommissionTableReportTableGenerateTable, {month: month}).then((res) => {
                        if (res && res.data.code == 200) {
                            this.$message({
                                message: '生成报表成功',
                                type: 'success'
                            });
                            this.$router.push({path: '/marketCommissionTable'})
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });
            },
            cancel() {
                this.$router.push({path: '/marketCommissionTable'})
            },
            ensure() {
                let month = this.getTimeString(this.cmonth)
                if (this.selectedInterval == '') {
                    this.$message({
                        message: '请选择标准',
                        type: 'warning'
                    });
                    return
                }
                if (month == '') {
                    this.$message({
                        message: '请选择日期',
                        type: 'warning'
                    });
                    return
                }

                this.axios.post(api.marketCommissionTableReportTableBindStandard, {
                    month: month,
                    standardId: this.selectedInterval
                }).then((res) => {
                    if (res && res.data.code == 200) {
                        this.$message({
                            message: '绑定成功！',
                            type: 'success'
                        });

                        let interval = this.selectedInterval
                        let arr = this.standardlist.filter(function (item, index, array) {
                            return item.id == interval
                        })
                        this.bindtips = arr[0].version
                        this.selectDialogVisible = false
                    }
                })
            },
            getstandard() {
                this.axios.post(api.marketCommissionTableReportTableGetStandard, {version: this.version}).then((res) => {
                    if (res && res.data.code == 200) {
                        this.standardlist = res.data.data.list
                    }
                })
            },
            openbindstrandard() {
                this.selectDialogVisible = true
            }
        },
    }
</script>

<style scoped lang="stylus">
    .marketCommissionReport {
        table {
            border-collapse: collapse;
            margin-top: 50px;
        }

        table, td, th {
            border: 1px solid #ccc;
        }
        td, th {
            width: 300px;
            height: 40px;
            text-align: center;
        }
        th {
            background-color: rgb(239, 239, 239);
        }
        .selectedInterval-item {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 20px;

            > div:first-child {
                width: 50px;
                text-align: center;
            }
            > div:last-child {
                flex: 1;
            }
        }
    }
</style>
